<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户中心</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/vue/vue.min.js"></script>
<script src="js/jquery/jquery.min.js"></script>
<script src="js/laypage/laypage.js" charset="utf-8"></script>
<script src="js/layer/layer.js" charset="utf-8"></script>
</head>
<body>
	<div id="app" class="container">
	
		<form class="form-inline bg-danger" role="form">			
		  查询条件：
		  <div class="form-group">
		    <label class="sr-only" for="sname">学生名称</label>
		    <input type="text" class="form-control" id="sname" placeholder="学生姓名">
		  </div>
		  <div class="form-group">
		    <label class="sr-only" for="sage">学生年龄</label>
		    <input type="text" class="form-control" id="sage" placeholder="学生年龄">
		  </div>
		  <div class="form-group">
		    <label class="sr-only" for="sclass">学生班级</label>
		    <input type="text" class="form-control" id="sclass" placeholder="学生班级">
		  </div>
		  <button type="button" id="getStudent" class="btn btn-success">查询用户</button>
		  <button type="button" id="addStudentBtn" class="btn btn-danger">增加用户</button>
		</form>
	
		
		
		<div class="table-responsive">
			<table class="table">
				<thead>
					<tr class="success">
						<td>学籍号</td>
						<td>学生姓名</td>
						<td>学生年纪</td>
						<td>学生班级</td>
						<td>邮箱</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr class="active" v-for="(item,index) in result">
						<td>{{index+1}}</td>
						<td>{{item.sname}}</td>
						<td>{{item.sage}}</td>
						<td>{{item.sclass}}</td>
						<td>{{item.email}}</td>
						<td><a href="#" @click="editEvent(item.sid)">编辑</a> <a href="#" @click="delEvent(item.sid)">删除</a></td>
					</tr>
				</tbody>
			</table>
			<div id="pagenav"></div>
		</div>
	</div>

	<script>
	
		var app = new Vue({
			el : '#app',
			data : {
				result : []
			}
		});

		//查询用户数据
		var getStudentPageList = function(curr) {
			$.ajax({
				type : "GET",
				dataType : "json",
				url : "/student/getcond",
				data : {
					pageNum:curr || 1,
					pageSize:10,
					sname:$("#sname").val()
				//向服务端传的参数，此处只是演示
				},
				success : function(msg) {
					app.result = msg.result;
					laypage({
						cont : 'pagenav', //容器。值支持id名、原生dom对象，jquery对象,
						pages : msg.totalPage, //总页数
						first : true,
						last : true,
						curr : curr || 1, //当前页
						jump : function(obj, first) { //触发分页后的回调
							if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
								getStudentPageList(obj.curr);
							}
						}
					});
				}
			});
		}
		
		getStudentPageList();

		
		
		//查询用户事件
		$('#getStudent').on('click', function() {
			getStudentPageList();
		});
		
		//增加用户事件
		$('#addStudentBtn').on('click', function() {
			
			layer.open({
				type : 2,
				title : '添加用户',
				fix : false,
				maxmin : true,
				shadeClose : true,
				area : [ '1100px', '600px' ],
				content : 'student-add.html',
				end : function() {
					getStudentPageList();
				}
			});
			
		});
		
		//编辑用户事件
		var editEvent = function(sid) {
			layer.open({
				type : 2,
				title : '编辑用户',
				fix : false,
				maxmin : true,
				shadeClose : true,
				area : [ '1100px', '600px' ],
				content : '/student/editpage?id='+sid,
				end : function() {
					getStudentPageList();
				}
			});
		}
		
		//删除用户事件
		var delEvent = function(sid) {
			//询问框
			layer.confirm('您确定要删除么？', {
				btn : [ '是', '否' ]
			//按钮
			}, function() {
					//是
					$.ajax({
						type : "GET",
						dataType : "json",
						url : "/student/del",
						data : {
							id:sid
						},
						success : function(msg) {
							getStudentPageList();
							layer.msg('已经成功删除记录' + sid,{icon:5});
						}
					});
	
			}, function() {
				//否
			});
		}
	</script>
</body>
</html>
